<template>
  <div>
    <div class="menu">
      <el-button type="primary" size="small" @click="openAddOrder">模拟添加</el-button>
    </div>
    <!-- 用户列表 -->
    <el-table :data="ordersList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="orderId" label="订单号">
      </el-table-column>
      <el-table-column prop="consignee.consigneeName" label="收货人">
      </el-table-column>
      <el-table-column prop="goods.goodsName" label="商品名称">
      </el-table-column>
      <el-table-column prop="goods.goodsImg" label="商品图片">
        <template v-slot="scope">
          <img :src="scope.row.goods.goodsImg"/>
        </template>
      </el-table-column>
      <el-table-column prop="goods.price" label="单价/元">
      </el-table-column>
      <el-table-column prop="goods.specification" label="规格/g(ml)/个">
      </el-table-column>
      <el-table-column prop="goodsNum" label="商品数量/份">
      </el-table-column>
      <el-table-column prop="sumPrice" label="总价/元">
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.orderStatus == 0" type="warning">待付款</el-tag>
          <el-tag v-if="scope.row.orderStatus == 1" type="success">已付款</el-tag>
          <el-tag v-if="scope.row.orderStatus == 2" type="danger">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <!-- <el-button type="primary" size="mini" @click="openEditorOrder(scope.row)">编辑</el-button>&nbsp;&nbsp; -->
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delOrder(scope.row.orderId)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="5" @current-change="getOrderList"
    	:total="ordersCount">
    </el-pagination>
    <AddOrder :addVisible="addVisible" :sysUsersList="sysUsersList"
    :consigneesList="consigneesList" :goodsList="goodsList"></AddOrder>
    <!-- <EditorOrder :editorVisible="editorVisible" :consigneesList="consigneesList" :editorObj="editorObj"></EditorOrder> -->
  </div>
</template>

<script>
  import AddOrder from "./component/AddOrder.vue"
  // import EditorOrder from "./component/EditorOrder.vue"
  export default {
    name: "Orders",
    components: {
    	AddOrder,
      // EditorOrder,
    },
    data() {
      return {
        loadStatus: false,
        addVisible: false,
        editorVisible:false,
        ordersList:[],
        ordersCount:0,
        editorObj:{},
        //添加下拉框数据
        sysUsersList:[],
        consigneesList:[],
        goodsList:[],
      }
    },
    mounted() {
    	this.getOrderList(1)
    },
    methods: {
      openAddOrder() {
        this.addVisible = true
      },
      // openEditorOrder(obj){
      //   console.log(obj)
      //   var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
      //   // if(obj.consigneeId){
      //     this.editorObj=obj
      //     this.editorVisible=true
      //   // }else{
      //   //   this.$message({
      //   //     message: "获取数据错误",
      //   //     type: "error",
      //   //     duration: 1000,
      //   //   })
      //   // }
      // },
      //查询数据
      getOrderList(page){
        var self = this;
        self.loadStatus = true
        sessionStorage.setItem("page",page)
        var manager = JSON.parse(sessionStorage.getItem("manager"))
        //进行空值还原，防止数据类型错误
        // if(this.vagueFindForm.status===""){
        //   this.vagueFindForm.status=null
        // }
        self.$http.get("/api/CakeShop/OrderManage/findAllOrders", {
        	params: {
            order:{
              start: page,
              pageSize: 5,
            }
            // status:this.vagueFindForm.status,
            // bannerName:this.vagueFindForm.bannerName
        	}
        }).then(function(res) {
        	// console.log(res)
        	if (res.data.orderList != null || res.data.orderList != {}) {
            //返回数据总数
        		self.ordersCount = res.data.pageCount
            //返回订单列表
            self.ordersList = res.data.orderList
            //返回下拉框数据
        		self.sysUsersList = res.data.sysUsersList
            self.consigneesList = res.data.consigneesList
            self.goodsList = res.data.goodsList

        		self.loadStatus = false
        	}
        }).catch(function(error) {
        	// console.log(error)
        	self.loadStatus = false
        })
      },
      //删除数据
      delOrder(orderId) {
        console.log(orderId)
      	var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        this.$http.delete("/api/CakeShop/OrderManage/delOrder", {
          headers: {
            token: onlineManager.token
          },
          params: {
            orderId
          }
        }).then((res) => {
          console.log(res)
          if (res.data.delSuccNum>0) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.getOrderList(sessionStorage.getItem("page"))
              }
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }, function(err) {})
      },
    },
  }
</script>

<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
</style>
